<aside class="style-container">
  <div class="flex justify-between flex-wrap sm:flex-nowrap style-space-mini">
    <div class="w-full sm:w-1/2">
      <article class="rounded-xl style-article-bg btn-animation sm:shadow sm:p-4">
        <h5 class="flex sm:justify-center size-title font-bold style-title-sub">随机推荐</h5>
        <ul class="mt-4 list-disc ml-4 size-des style-des">
          {% for p in recentPosts %}
          {% if currentLoop.currentIndex < 5 %} <li class="py-2.5 btn-animation style-hover">
            <a href="{{ p.url }}">
              <span class="line-clamp-1">
                {{ p.title }}
              </span>
            </a>
            </li>
            {% /if %}
            {% /for %}
        </ul>
      </article>
    </div>
    <div class="w-full sm:w-1/2 flex flex-wrap style-space-mini">
      <article class="sm:rounded-xl w-full style-article-bg btn-animation sm:shadow sm:p-4">
        <h5 class="flex sm:justify-center size-title font-bold style-title-sub">分类</h5>
        <div class="flex flex-wrap gap-4 sm:gap-2 mt-4 size-des style-des">
          {% for p in categoriesTree %}
          <a class="rounded-xl px-2.5 py-1.5 style-hover style-mark-bg btn-animation" href="{{ p.url }}"><strong>{{
              p.name }}</strong>({{p.count}})</a>
          {% /for %}

        </div>
      </article>
      <article class="sm:rounded-xl w-full style-article-bg btn-animation sm:shadow sm:p-4">
        <h5 class="flex sm:justify-center size-title font-bold style-title-sub">标签</h5>
        <div class="flex flex-wrap gap-4 sm:gap-2 mt-4 size-des style-des">
          {% for p in allTags %}
          <a class="rounded-xl px-2.5 py-1.5 style-hover style-mark-bg btn-animation" href="{{ p.url }}">
            <strong>#{{p.name }}({{p.count}})</strong>
          </a>
          {% /for %}
        </div>
      </article>
    </div>
  </div>
</aside>



<!-- 侧边栏
<div class="large-4 medium-4 columns">
  <div class="hide-for-small">
    <div id="sidebar" class="sidebar">
      <div id="site-info" class="site-info">
        {% if ext_logo_path.length %}
        <div class="site-a-logo"><img src="{{ ext_logo_path }}" /></div>
        {% /if %}
        <h1>{{ siteName }}</h1>
        <div class="site-des">{{ siteDes }}</div>
       
        添加：哔哩哔哩，网易云音乐，和steam 选项
        
<div class="social">
  {% if ext_weibo_url.length %}<a target="_blank" class="weibo" href="{{ ext_weibo_url }}" title="weibo">Weibo</a>{% /if
  %}
  {% if ext_github_url.length %}<a target="_blank" class="github" target="_blank" href="{{ ext_github_url }}"
    title="GitHub">GitHub</a>{% /if %}
  {% if ext_email.length %}<a target="_blank" class="email" href="mailto:{{ ext_email }}" title="Email">Email</a>{% /if
  %}
  <a target="_blank" class="rss" href="atom.xml" title="RSS">RSS</a>
</div>
</div>

{% if ext_global_notice.length %}
<div id="site-categories" class="side-item ">
  <div class="side-header">
    <h2>Important</h2>
  </div>
  <div class="side-content">
    <div style="color:#ff0000; text-align:center; padding:8px;" class="bg-info site_notice">
      {{ ext_global_notice }}
    </div>
  </div>
</div>
{% /if %}
</div>
</div>
</div>

-->